import { FC, useEffect } from 'react'
import { Form, Input, Select, Checkbox } from 'antd'
import { propsType } from './index'
import { useDispatch } from 'react-redux'
import { editComponent } from '@/store/componentsReducer'
const PropComponent: FC<propsType> = props => {
  const { text, level, isCenter, disabled } = props
  const [form] = Form.useForm()
  const dispatch = useDispatch()
  useEffect(() => {
    form.setFieldsValue({ text, level, isCenter })
  }, [text, level, isCenter, form])
  const handelValueChange = () => {
    dispatch(editComponent(form.getFieldsValue()))
  }
  return (
    <Form
      onValuesChange={handelValueChange}
      disabled={disabled}
      layout="vertical"
      initialValues={{ text, level, isCenter }}
      form={form}>
      <Form.Item label="标题内容" name="text">
        <Input />
      </Form.Item>
      <Form.Item label="层级" name="level">
        <Select
          options={[
            { value: 1, text: 1 },
            { value: 2, text: 2 },
            { value: 3, text: 3 },
          ]}
        />
      </Form.Item>
      <Form.Item name="isCenter" valuePropName="checked">
        <Checkbox>居中显示</Checkbox>
      </Form.Item>
    </Form>
  )
}

export default PropComponent
